<template>
	<view class="container">
		<view class="form-box">
			<view class="title">登录</view>
			<view class="input-box">
				<input type="text" class="input" placeholder="请输入用户名" v-model="username" @blur="validateUsername" />
				<text v-if="usernameError" class="error-text">{{ usernameError }}</text>
			</view>
			<view class="input-box">
				<input type="password" class="input" placeholder="请输入密码" v-model="password" @blur="validatePassword" />
				<text v-if="passwordError" class="error-text">{{ passwordError }}</text>
			</view>
			<button class="login-btn" @click="login" :disabled="!canLogin">登录</button>
			<button class="register-btn" @click="register">注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				usernameError: '',
				passwordError: '',
				canLogin: false,
				userArr: []
			};
		},
		created() {
			if (uni.getStorageSync("userArr")) {
				this.userArr = uni.getStorageSync("userArr")
			} else {
				this.userArr = []
			}
		},
		onShow: function() {
			this.userArr = uni.getStorageSync("userArr")
		},
		methods: {
			validateUsername() {
				this.usernameError = '';
				if (!this.username.trim()) {
					this.usernameError = '用户名不能为空';
				} else if (!/^[a-zA-Z0-9_]+$/.test(this.username)) {
					this.usernameError = '用户名只能包含字母、数字和下划线';
				}
				this.updateCanLogin();
			},
			validatePassword() {
				this.passwordError = '';
				if (!this.password.trim()) {
					this.passwordError = '密码不能为空';
				} else if (this.password.length < 6) {
					this.passwordError = '密码长度不能少于6位';
				}
				this.updateCanLogin();
			},
			updateCanLogin() {
				this.canLogin = !(this.usernameError || this.passwordError);
			},
			login() {
				if (this.username) {
					let flg = false
					if (this.userArr.length) {
						flg = this.userArr.some(v => v.username === this.username)
					}
					// 存在用户
					if (flg) {
						const flgs = this.userArr.some(v => v.username === this.username && v.password === this.password)
						const itemArr = this.userArr.filter(v => v.username === this.username && v.password === this
							.password)
						if (flgs) {
							uni.showToast({
								title: '登录成功！',
								duration: 2000
							})
							uni.setStorageSync('userInfor', itemArr)
							uni.navigateTo({
								url: '/pages/movie/index'
							})
						} else {
							uni.showModal({
								title: '提示',
								content: '用户名或密码错误'
							})
						}
					} else {
						// 不存在用户
						uni.showModal({
							title: '提示',
							content: '用户不存在，是否注册？',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/regis/index'
									})
								} else if (res.cancel) {
									console.log('取消')
								}
							}
						})
					}
				}

			},
			register() {
				uni.navigateTo({
					url: '/pages/regis/index'
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		color: #fff;
		text-align: center;
		font-size: 54.74rpx;
	}


	.input-box {
		border: 1.82rpx solid #fff;
		color: #fff;
	}

	.input-box {
		margin-bottom: 54.74rpx;
	}

	.register-btn {
		margin-top: 54.74rpx;
	}
</style>